Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
01 / 12
A practical tutorial

Your design team
just got a new
hire.

10 minutes a day with Claude replaced three tools in my workflow. Here's exactly how — and the five use cases designers & PMs are quietly using to ship 10× faster.

Save this → 12-slide carousel
by a designer, for designers
Swipe
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
02 / 12
Chapter one

What is
Claude Design?

It's not a new app. It's a way of using Claude to design real interfaces, prototypes, decks, and systems — in the same chat window you already use to write.
A brief + your taste + Claude = working design
Output
HTML · Prototypes · Decks · Tokens
Input
Words · Screenshots · Your brand
Speed
Minutes, not days
Not a tool. A loop.
Keep going
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
03 / 12
Chapter two

Built for doers,
not just designers.

Designers
Ship 6 directions
before lunch.
Stop starting from a blank Figma file. Generate five contrarian layouts, pick one, refine.
PMs
Turn the PRD into a clickable prototype.
Bring something real to the kickoff — not a Loom and a wall of text.
Founders
Your cofounder is the designer now.
Land hi-fi pitch assets and a working landing page in one session.
Engineers
Draft the UI before you write the JSX.
Explore states, empty screens, edge cases — then copy the HTML out.
If you ship things, this is for you.
Next
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
04 / 12
The 10-minute loop

How it actually
works.

One chat window. Four moves. Infinite design rounds.

01
Feed it context
Paste a PRD, drop screenshots, link your design system.
~2 MIN
02
Ask for a direction
"Give me 3 variations of the onboarding, magazine style."
~1 MIN
03
Point & tweak, don't re-prompt
Comment on the live preview. Nudge colors, swap layouts.
~5 MIN
04
Export the winner
PPTX, PDF, standalone HTML, or handoff bundle for Claude Code.
~2 MIN
Total: ~10 minutes
5 use cases →
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
05 / 12
Use case 01

PRD →
clickable proto.

01

Stop stalling at "can someone mock this?" Paste the doc. Ship the first draft.

You · 9:42 AM
📎 onboarding-prd.md  ·  📎 brand-tokens.css
Make me a 3-screen onboarding prototype for the PRD attached. Use our brand tokens. Mobile, 390×844. Real tap interactions.
Claude · 9:43 AM
Here's Onboarding.html with 3 screens and working navigation. I added a "skip" flow for returning users based on section 4.2. Want me to add an empty state?
From doc → demo in one prompt
Use case 02
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
06 / 12
Use case 02

Six directions,
one prompt.

02

Ask for divergent visuals, not a single "best" answer. Pick the one your gut loves — that's your job.

01 · Editorial
Serif & whitespace
02 · Brutalist
Mono, raw grid
03 · Warm pop
Terracotta hero
04 · Sand & stone
Quiet, muted
05 · Pine
Dark mode first
06 · Amber
Glow & gradient
"Give me 6 variations, different vibes"
Use case 03
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
07 / 12
Use case 03

Steal from
yourself.

03

Drop a screenshot of your product. Claude extracts tokens, type pairings and spacing — then reuses them for every new screen you ask for.

Extracted · Type
Instrument Serif
Inter Tight · 500
JetBrains Mono · 400
Extracted · Color
#151311 · #F3EEE3 · #C2543A · #E8B36A
Extracted · Radius
4 · 10 · 18 · full
Extracted · Spacing
8 · 16 · 24 · 40 · 64
One screenshot = your system, encoded
Use case 04
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
08 / 12
Use case 04

Decks that don't
look AI-made.

04

Paste your outline. Ask for an editorial deck at 1920×1080. Export PPTX editable, keep your boardroom-safe look.

01 · Cover
Q2 product
review.
May  ·  Board
02 · Section
What
changed.
Chapter one
03 · Stat
+312%
Activation · wow
04 · Quote
"Finally a deck
that doesn't feel
templated."
— Head of Design
Outline in → editable PPTX out
Use case 05
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
09 / 12
Use case 05

Iterate by
pointing.

05

Click the element. Type what's wrong. Claude knows which source to edit — no more "can you change the thing on the right?"

1
Make this card stretch full-width, darker surface.
2
Swap this accent for the ochre from our tokens.
3
Fewer rounded corners, more editorial.
Designing like Figma comments
The mindset →
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
10 / 12
The mindset shift

Stop prompting.
Start art directing.

Your job didn't disappear — it got upgraded. You're the editor, not the typist. The taste, the constraints, the "no, warmer" — that's still all you.

Give context Set constraints Explore widely Decide
Taste is the moat.
2 slides left
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
11 / 12
Five common mistakes

What kills
your output.

01
No context, no taste.
Starting cold = generic slop. Feed it your brand, your references, your do's & don'ts.
02
Asking for "a design."
Ask for 3–6 divergent directions. The magic is in comparison, not in one perfect guess.
03
Re-prompting instead of pointing.
Use inline comments on the preview. It's faster and the context is embedded.
04
Letting it pick the fonts.
Inter + Roboto = AI smell. Commit to a real type system (editorial, mono, display) yourself.
05
Settling on round one.
The first pass is a warm-up. Your actual design is 3 iterations in.
Ship taste, not output.
Last slide
Claude Design
V
Vishal Jaiswal
AI & Analytics Leader
12 / 12
Your turn

Comment "Design"
get 5 templates.

Five ready-to-remix Claude Code design templates: landing page, pitch deck, onboarding flow, design-system starter, and a mobile app shell. Free. No DM tax.

Add a comment
Design
↑ and I'll send all 5 ↑ Comment
PS
Follow for more practical Claude workflows — shipped weekly.
Save + repost ↗
→ see the bonus templates page
End

Tweaks